<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style/vant@3.css" />
    <title>Document</title>
</head>

<body>
    <div id="mobileCodeNumber">
        <van-cell-group inset>
            <van-field v-model="mobile" type="tel" label="手机号"></van-field>
            <van-field v-model="mobileCode" center clearable label="短信验证码" placeholder="请输入短信验证码">
                <template #button>
                    <van-button size="small" type="primary" :disabled="counting" @click="sendSms">
                        {{ counting ? `${count}s 后重新发送` : '发送验证码' }}
                    </van-button>
                </template>
            </van-field>
            <van-button round block type="success" @click="GotoLogin">登录</van-button>
        </van-cell-group>
    </div>
    <script src="./utils/Vue3.js"></script>
    <script src="./utils/vant.min.js"></script>
    <script src="./utils/axios.js"></script>
    <script src="./utils/VantPlugin.js"></script>
    <script>
        const { createApp, ref } = Vue;
        const mobile = ref('')
        const counting = ref(false)
        const count = ref(60)
        const mobileCode = ref('')
        let domain = 'http://127.0.0.1:3009'
        const app = createApp({
            data() {
                return {
                    mobile,
                    counting,
                    count,
                    mobileCode
                }
            },
            setup() {
                const sendSms = () => {
                    if (!counting.value) {
                        counting.value = true;
                        useSendMobileCode()
                        const timer = setInterval(() => {
                            if (count.value > 0) {
                                count.value--;
                            } else {
                                counting.value = false;
                                count.value = 60;
                                clearInterval(timer);
                            }
                        }, 1000);
                    }
                };
                const useSendMobileCode = async () => {
                    try {
                        const res = await axios({
                            url: domain + `/Test/MobileCodeNumber?mobile=${mobile.value}`,
                            method: 'get'
                        })
                        console.log(': ', res)
                    } catch (err) {
                        console.log(': ', err.response)
                    }
                }

                const GotoLogin = async () => {
                    try {
                        const res = await axios({
                            url: domain + '/Test/login',
                            method: 'post',
                            data: {
                                mobile: mobile.value,
                                code: mobileCode.value
                            }

                        })
                        console.log('GotoLogin: ', res)
                    } catch (err) {
                        console.log('GotoLogin: ', err.response)
                    }
                }
                return {
                    sendSms,
                    useSendMobileCode,
                    GotoLogin
                };
            },

        });

        app.use(VantPlugin);

        app.mount('#mobileCodeNumber');
    </script>
</body>

</html>